<!--
 * @作者: kerwin
-->
<!--
 * @作者: kerwin
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .header {
            display: flex;
            width: 500px;
        }

        .header li {
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }

        .box {
            position: relative;
            height: 200px;
        }

        .box li {
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 200px;
            background-color: yellow;
            display: none;
        }

        .header .active {
            background-color: red;
        }

        .box .active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container1">
        <ul class="header">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <ul class="box">
            <li class="active">111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>666</li>
        </ul>
    </div>

    <div class="container2">
        <ul class="header">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <ul class="box">
            <li class="active">111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>666</li>
        </ul>
    </div>

    <script>
        class Tabs {
            constructor(selector, type) {
                this.selector = document.querySelector(selector)

                this.headerItems = this.selector.querySelectorAll(".header li")
                this.boxItems = this.selector.querySelectorAll(".box li")

                console.log(this.headerItems, this.boxItems)

                this.type = type
                this.change()
            }

            change() {
                for (let i = 0; i < this.headerItems.length; i++) {
                    this.headerItems[i].addEventListener(this.type, () => {
                        // console.log(i)
                        //移除所有的active
                        for (let m = 0; m < this.headerItems.length; m++) {
                            this.headerItems[m].classList.remove("active")
                            this.boxItems[m].classList.remove("active")
                        }

                        this.headerItems[i].classList.add("active")
                        this.boxItems[i].classList.add("active")
                    }, false)
                }
            }
        }

        new Tabs(".container1", "click")
        new Tabs(".container2", "mouseover")
    </script>
</body>

</html>